<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		<title>{t}Media edition{/t} : {$media->getLabel()}</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
		<link rel="stylesheet" type="text/css" href="{$URL_RELATIVE}/themes/{$BACK_THEME}/backend/css/reset.css" />
        <link rel="stylesheet" type="text/css" href="{$URL_RELATIVE}/js/lib/jQueryPlugins/colorpicker/css/colorpicker.css" />
        <link rel="stylesheet" type="text/css" href="{$URL_RELATIVE}/themes/{$BACK_THEME}/backend/css/mediaEdit.css" />
				
		<script src="{$URL_RELATIVE}/js/lib/jQuery/jquery.min.js" type="text/javascript"></script>
		<script src="{$URL_RELATIVE}/js/lib/jQueryUI/jquery-ui.min.js" type="text/javascript"></script>
        <script src="{$URL_RELATIVE}/js/lib/jQueryPlugins/colorpicker/js/colorpicker.js" type="text/javascript"></script>
		<script src="{$URL_RELATIVE}/themes/{$BACK_THEME}/backend/js/jQueryMediaEdit.js" type="text/javascript"></script>
        <script type="text/javascript">
            var myOpener = {php}
                if(strlen($_GET['opener'])>0)
                    echo '"'.$_GET['opener'].'"';
                else echo '""';
                {/php};
        </script>
    </head>
	
	<body>
		<div id="page">
            <div id="message"></div>
			<div style="display:none">
				<div id="origFileName">{$media->getFileNameWoExt()}</div>
				<div id="origExtension">{$media->getExtension()}</div>
			</div>
			<div id="menuBarTop">
                <table class="menuBarTable">
                    <tr>
                        <td>{t}Registered templates{/t}</td>
                        <td class="headRightBorder">
                            <select id="formatSizes">
                                <option value="">------</option>
                                {foreach from=$parameters item=parameter}
                                <option value="{$parameter->getWidth()}x{$parameter->getHeight()}">{$parameter->getLabel()|capitalize} ({$parameter->getWidth()}x{$parameter->getHeight()})</option>
                                {/foreach}
                            </select>
                        </td>
                        <td class="headLeftBorder">{t}Framing{/t}</td>
                        <td class="headRightBorder">
                            <input type="text" id="containerWidth" style="width:45px" {if !empty($size.0)}value="{$size.0}"{/if} /> X <input type="text" id="containerHeight" {if !empty($size.1)}value="{$size.1}"{/if} style="width:45px" />
                        </td>
                        <td class="headLeftBorder">
                            {section name=foo start=1 loop=4}
                                {assign var="i" value=$smarty.section.foo.iteration}
                                {backend_image file="crop/cadre$i.png" id="cadre$i" class="cadre"}
                            {/section}
                        </td>
                        <td>
                            {t}Background{/t}
                            <div id="colorSelector">
                                <div id="selectorBg" style="background-color: rgb(0, 0, 0);"></div>
                            </div>
                        </td>
                    </tr>
                </table>
				<input type="hidden" value="{$media->getUniqueId()}" id="docId" />
				<input type="hidden" value="{$media->getLang()}" id="docLang" />
                <input type="hidden" id="refreshOpener" value="false" />
            </div>

            <div id="loader">
                {backend_image file="ajax-loader-big.gif"}
            </div>

            <div id="zoom">
                <span class="title">{t}ZOOM{/t}</span>
                <div id="zoomContainer">
                    {icon name="plus.png" size="12" id="zoomBig"}
                    <div id="sliderContainer">
                        <div id="slider"></div>
                    </div>
                    {icon name="moins.png" size="12" id="zoomSmall"}
                    {icon name="reset.png" id="resetImage"}
                    <input type="text" id="zoomSlider" />
                </div>
            </div>
            
            {assign var='dim' value=$media->getDimensions()}
            <div id="container">
                <img src="{$image}" id="image" style="margin:0; padding:0; width:{$dim.0}px;height:{$dim.1}px; display: none;" />
                <div id="crop">
                    <div class="mask"></div>
                </div>
            </div>

            <div id="info">
                <div>{t}Original size{/t} : {$dim.0} x {$dim.1}</div>
                <div>{t}Current size{/t} : <span id="currentSize"></span></div>
                <div>{t}Position X{/t} : <span id="posX"></span>px</div>
                <div>{t}Position Y{/t} : <span id="posY"></span>px</div>
            </div>
			<div id="menuBarBottom">
                <button class="bigGreyButton" id="exitButton">{t}Close{/t}</button>&nbsp;
                <button class="bigGreenButton" id="saveButton">{t}Save{/t}</button>
            </div>
		</div>
	</body>
</html>